import React, { Component } from 'react'
import Detail from '../Home_Message_Detail'
import {Redirect, Route, Link} from 'react-router-dom'

export default class Message extends Component {
  state = {
    messageArr: [
      {id: '01', title: 'message001'},
      {id: '02', title: 'message002'},
      {id: '03', title: 'message003'}
    ]
  }

  // 点击按钮push跳转
  pushShow = (id, title)=>{
    // push + params
    // this.props.history.push(`/home/message/detail/${id}/title=${title}`)

    // push + search
    // this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)

    // push + state
    this.props.history.push({pathname:"/home/message/detail", state: {id:id, title:title}})
  }

  // 点击按钮replace跳转
  replaceShow = (id, title)=>{
    // replace + params
    // this.props.history.replace(`/home/message/detail/${id}/title=${title}`)

    // replace + search
    // this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)

    // replace + state
    this.props.history.replace({pathname:"/home/message/detail", state: {id:id, title:title}})
  }

  // 点击按钮前进
  forward = ()=>{
    this.props.history.goForward()
  }

  // 点击按钮回退
  back = ()=>{
    this.props.history.goBack()
  }

  // 点击按钮前进2步
  forwardTwo = ()=>{
    this.props.history.go(2)
  }

  // 进入message页面后延时跳转
  componentDidMount(){
    setTimeout(()=>{
      console.log("01")
      this.props.history.push({pathname:"/home/message/detail", state: {id:"01", title:"message001"}})
    },2000)
  }

  render() {
    const {messageArr} = this.state  
    return (
      <div>
        <ul>
          {messageArr.map(msgObj => {
            return (
              <li key={msgObj.id}>

                {/* 向路由组件传递param参数 */}
                {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

                {/* 向路由组件传递search参数 */}
                {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

                {/* 向路由组件传递state参数 */}
                <Link to={{pathname: "/home/message/detail", state: {id:msgObj.id, title:msgObj.title}}}>{msgObj.title}</Link>&nbsp;&nbsp;
                
                <button onClick={()=>this.pushShow(msgObj.id, msgObj.title)}>push</button>&nbsp;
                <button onClick={()=>this.replaceShow(msgObj.id, msgObj.title)}>replace</button>

              </li>
            )
          })}
        </ul>
        <hr/>
        <button onClick={this.forward}>forward</button>&nbsp;
        <button onClick={this.back}>back</button>&nbsp;
        <button onClick={this.forwardTwo}>forward 2 step</button>


        {/* 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

        {/* search参数无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail}/> */}

        {/* state参数无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail}/>

      </div>
    )
  }
}
